<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Anthor" content="月影-253737688" />
    <title>弹力球</title>
    <style>
        *{margin: 0;padding: 0;}
        .ball{
            position: absolute;
            width: 60px;
            height: 60px;
            background-color: #cc9933;
            border-radius: 50%;
        }
        .ball:nth-child(1){
            background-color: #039db4;
        }
        .ball:nth-child(2){
            background-color: #ff160a;
        }

        .ball:nth-child(3){
            background-color: #0d0eff;
        }

        .ball:nth-child(4){
            background-color: #ff02a1;
        }

        .ball:nth-child(5){
            background-color: #7500ff;
        }

        .ball:nth-child(6){
            background-color: #3ea540;
        }


    </style>

</head>
<body>

    <div class="ball">
    </div>
    <div class="ball">
    </div>
    <div class="ball">
    </div>
    <div class="ball">
    </div>
    <div class="ball">
    </div>
    <div class="ball">
    </div>
    <div class="ball">
    </div>

    <script>

        var aBall = document.querySelectorAll(".ball"),
            lens = aBall.length,
                width = aBall[0].offsetWidth,
                height = aBall[0].offsetHeight,
                Vx = [2,4,6,8,10,12,14],
                Vy = [2,4,6,8,10,12,14];


        //边界
        var maxW,maxH;
        //浏览器的窗口在改变大小的时候触发
        window.onresize = max();
        function max(){
            maxW = document.documentElement.clientWidth - width;
            maxH = document.documentElement.clientHeight - height;
            return max;
        }
// 多个球运动  
      	setInterval(run,30)
            function run() {
                for(var i=0;i<lens;i++) {
                    var left = aBall[i].offsetLeft + Vx[i],
                        top = aBall[i].offsetTop + Vy[i];
                if(left>=maxW){
                    left=maxW;
                    Vx[i]=-Vx[i];
                    randomNum(aBall[i])
                }else if(left<=0){
                    left=0;
                    Vx[i]=-Vx[i];
                    randomNum(aBall[i])
                }
                if(top>=maxH){
                    top=maxH;
                    Vy[i]=-Vy[i];
                    randomNum(aBall[i])
                }else if(top<=0){
                    top=0;
                    Vy[i]=-Vy[i];
                    randomNum(aBall[i])
                }
                aBall[i].style.left= left+"px";
                aBall[i].style.top= top+"px";
                }
        }

        // 设置随机数函数 返回十六进制颜色值
        function randomNum(obj) {
            // 随机生成6个 0到15 之间的随机数转换为十六进制 和 # 号拼接成十六进制颜色值
            var strColor = "#"
            for(var i=0;i<6;i++){
                strColor += Math.floor(Math.random()*16).toString(16)
            }
            obj.style.backgroundColor=strColor
        }
/*
 //当个球运动

 // 延时定时器兼容
 window.requestAnimationFrame = window.requestAnimationFrame || function(a){return setTimeout(a,1000/60)};
 window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
        ~function run() {
            var left =aBall[0].offsetLeft+Vx[0],
                top = aBall[0].offsetTop+Vy[0];

            if(left>=maxW){
                left=maxW;
                Vx[0]=-Vx[0];
            }else if(left<=0){
                left=0;
                Vx[0]=-Vx[0];
            }
            if(top>=maxH){
                top=maxH
                Vy[0]=-Vy[0];
            }else if(top<=0){
                top=0;
                Vy[0]=-Vy[0];
            }
            requestAnimationFrame(run)
            aBall[0].style.left= left+"px";
            aBall[0].style.top= top+"px";
        }()
*/


    </script>
</body>
</html>